<template>
  <view class="body">
    <uni-nav-bar
      right-icon="plusempty"
      title="新选择"
      status-bar="true"
      fixed="true"
      @clickRight="addChance"
    ></uni-nav-bar>
    <view class="container">
      <view class="box" v-if="list.length > 0">
        <view class="choose_text">自定义选择</view>
        <uni-swipe-action>
          <view
            v-for="(item, index) in list"
            :key="index"
           
          >
            <uni-swipe-action-item class="uni-swipe-action-item">
              <view class="box_inner">{{ item.title ? item.title : "-" }}</view>
              <!-- <button class="swipe-change" @click="swipeChange(index)"><text>×</text></button> -->
              <span @click="swipeChange(index)" class="icon iconfont"
                >&#xe63a;</span
              >
            </uni-swipe-action-item>

            <view class="choose_list"  @click="goback(item)" >
              <view>列表选项</view>
              <view v-for="(choose, index) in item.list" :key="index">
                <span>{{ choose.name }}/</span>
              </view>
            </view>
          </view>
        </uni-swipe-action>
      </view>
      <view class="empty" v-if="list.length <= 0">
        <view class="empty_inner">
          <image src="/static/empty.png" />
          <view class="text">还没添加决定哦~~~点击+添加吧</view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <button @click="addChance">添加新决定</button>
    </view>
    <mode-list></mode-list>
  </view>
</template>
<script>
import "../../static/font/iconfont.css";
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
import uniSwipeAction from "@/components/uni-swipe-action/uni-swipe-action.vue";
import uniSwipeActionItem from "@/components/uni-swipe-action-item/uni-swipe-action-item.vue";
import modeList from "@/components/modeList/modeList.vue";

export default {
  components: { uniSwipeAction, uniSwipeActionItem, uniNavBar, modeList },
  onShow() {
    let list = uni.getStorageSync("list");
    if (list) {
      list = JSON.parse(list);
      this.list = list;
    }
    console.log(this.list);
  },
  data() {
    return {
      key: "value",
      list: [],
    };
  },
  methods: {
    addChance() {
      uni.navigateTo({
        url: "./addmode",
      });
    },
    swipeChange(index) {
      this.list = this.list.filter((item, i) => i != index);
      uni.setStorageSync("list", JSON.stringify(this.list));
    },
    goback(item) {
      uni.setStorageSync("item", JSON.stringify(item));
      uni.switchTab({
        url: `/pages/decision/index`,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.body {
  width: 100%;
  .container {
    width: 100%;
    height: 100%;
    .swipe-change {
      width: 15%;
      height: 90%;
    }
    .icon {
      margin: auto;
      color: #5f6368;
      font-size: 85rpx;
    }
    .choose_list {
      padding: 0 0 10upx 20upx;
      background-color: rgb(249, 205, 173);
      padding: 25upx;
      border-radius: 25upx;
      display: flex;
      flex-wrap: wrap;
    }
  }
}
.box {
  height: 100%;
  width: 90%;
  margin-left: 5%;
  /deep/ .uni-swipe {
    width: 100%;
    border-radius: 20upx;
    height: 100upx;
    background: rgb(210, 200, 169);
    margin: 25upx auto 0 auto;
    padding-left: 5%;
    width: 95%;
  }
  .box_inner {
    width: 100%;
    height: 100upx;
    display: flex;
    align-items: center;
    border-bottom: 2upx solid #ccc;
    font-size: 20px;

  }
  .choose_text{
        font-size: 45upx;
        font-weight: 700;
        color: #888069;
        margin: 20upx 0 20upx 3%;
  }
}
.empty {
  width: 100%;
  height: 500upx;
  display: flex;
  align-items: center;
  justify-content: center;
  .empty_inner {
    width: 100%;
    height: 400upx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    image {
      width: 230upx;
      height: 200upx;
    }
    .text {
      margin-top: 50upx;
      color: #ccc;
    }
  }
}
.bottom {
  position: fixed;
  width: 100%;
  height: 100upx;
  bottom: 0%;
  left: 0%;
  button {
    width: 100%;
    height: 100upx;
  }
}
.button_box {
  width: 100%;
  height: 100upx;
}
// /deep/ .uni-swipe_button .button-hock {
//   background-color: salmon;
// }
</style>